<template>
    <div id="node">
      <h3>我是阅读笔记组件</h3>
      <ul>
        <li v-for="(item,index) in bookName">
          <router-link :to="'/node/nodeDetail/'+JSON.stringify({'i':index,'content':item.select,'name':item.name})">{{item.name}}</router-link>
          <!--<router-link :to="'/node/nodeDetail?node='+{'i':index,'content':item.select}">{{item.name}}</router-link>-->
        </li>
      </ul>
    </div>
</template>

<script>
  // import NodeDetail from 'NodeDetail';
    export default {
        name: "node",
      data(){
          return{
            bookName:[
              {'name':'Little Prince','select':'To me,you will be unique in all the world. To you,I shall be unique in all the world.'},
              {'name':'Stray Bird','select':'You smiled and talked to me of nothing,and I felt that for this I had been waiting long.'},
              {'name':'The Rrophet','select':'Love one another,but make not a bond of love.'},
              {'name':'Pride and Prejudice','select':'傲慢与偏见'}
            ]
          }
      },
      methods:{

      }
    }
</script>

<style scoped>
  h3{
    font-size: 30px;
    text-align: center;
    font-weight: 400;
  }
  ul{
    padding: 20px;
    box-sizing: border-box;
    background-color: palevioletred;
  }
  ul>li{
    list-style: none;
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;
  }
  ul>li:last-of-type{
    margin-bottom: 0;
  }
  ul>li a{
    text-decoration: none;
    color: whitesmoke;
  }
</style>
